<script setup lang="ts">
import { ref, onMounted} from 'vue'
import type { LoginEmp } from '@/api/model/model'
import type {FormInstance, FormRules } from 'element-plus'
import {loginApi} from '@/api/login/index'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useRouter} from 'vue-router'
import {useLoginEmpStore} from '@/stores/loginEmp'
const router = useRouter();

// import {useCounterStore} from '@/stores/counter'
// const counterStore = useCounterStore();


const loginEmpStore = useLoginEmpStore();

// onMounted(()=>{
//   counterStore.increment();
//   counterStore.increment();
// })

const loginForm = ref<LoginEmp>({username:'', password:''})

const rules = ref<FormRules<LoginEmp>>({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 2, max: 10, message: '用户名长度在2-10个字之间', trigger: 'blur' },
  ],
 password:[
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 2, max: 10, message: '密码长度在2-10个字之间', trigger: 'blur' },
  ]
})
const loginFormRef = ref<FormInstance>();

const login = (formEL : FormInstance|undefined )=>{
  if(!formEL ){
    return;
  }
  formEL.validate(async (result)=>{
     if(result){
        // 访问登录接口
        const res = await loginApi(loginForm.value);
        if(!res.code){
            ElMessage.error(res.msg);
        }else{
            // 保存登录信息到pinia中
            loginEmpStore.saveLoginInfo(res.data);
            // 如果成功 跳转到主页
            router.push('/')
        }
     }
  });
}
</script>

<template>
  <div id="container">
    <div class="login-form">
      <el-form label-width="80px" :model="loginForm" ref="loginFormRef" :rules="rules">
        <p class="title">Tlias智能学习辅助系统</p>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" clearable></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="button" type="primary" @click="login(loginFormRef)">登 录</el-button>
          <el-button class="button" type="info" @click="">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
#container {
  padding: 10%;
  height: 410px;
  background-image: url('../../assets/bg1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.login-form {
  max-width: 400px;
  padding: 30px;
  margin: 0 auto;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: white;
}

.title {
  font-size: 30px;
  font-family: '楷体';
  text-align: center;
  margin-bottom: 30px;
  font-weight: bold;
}

.button {
  margin-top: 30px;
  width: 120px;
}
</style>